<template>
    <div class="city">
        <city-head></city-head>
        <city-search :cities="cities"></city-search>
        <city-list :hotCities="hotCities" :cities="cities" ></city-list>
        <city-word :cities="cities" @changeWord="handleword"></city-word>
        <!-- 將子串過來的接受定義handleword -->
    </div>
</template>
<script>
import {CityModel} from "../../models/CityModel";
const cityModel = new CityModel();
import CityHead from "./components/head";
import CitySearch from "./components/search";
import CityList from "./components/list";
import CityWord from "./components/word"
export default {
    name:"City",
    components:{
        CityHead,
        CitySearch,
        CityList,
        CityWord
    },
    data(){
        return {
            hotCities:[],
            cities:[]
        }
    },
    mounted(){
        cityModel.getCity().then(res=>{
            let data = res.data.data;
            let {hotCities,cities} = data;
            this.hotCities = hotCities;
            this.cities = cities;
            console.log(cities);
            console.log(hotCities);
        })
    },
    methods:{
        handleword(word){
            this.letter = word
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
